<template>
	<view class="sellingGoods">
		<view>
			<h2>售卖商品</h2>
		</view>
		<view class="sellingGoods_bor" style="background-color: white;">
			<view style="display: flex;align-items: center;" @click="toggleAdvancedOptions">
				<h3 style="width: 87%;color: #000;">店铺设置</h3>
				<u-icon style="text-align: right;"  :name="icon"></u-icon>
			</view>
			<view v-if="show">
				<view style="display: flex;align-items: center;">
					<text style="width: 90%;">在主页开启 [店铺] 标签页</text>
					<u-switch space="2" v-model="value11" activeColor="#f98d20" inactiveColor="rgb(230, 230, 230)">
					</u-switch>
				</view>
				<view style="display: flex;align-items: center;">
					<text style="width: 76%;">主页商品展示个数</text>
					<picker style="color:#999;" mode="selector"
						:range="visitName" :value="selectedIndex" @change="handleVisitChanges">
						<view style="display: flex;align-items: center;">{{options[selectedIndex].text}}
							<u-icon style="margin-left: 15rpx;" name="arrow-down" size="18" color="#666"></u-icon>
						</view>
					</picker>
				</view>
			</view>
		</view>
		<view style="margin: 20rpx 0;">
			<picker style="color: #ddd;padding: 10rpx;border-radius: 10rpx;width: 200rpx;color:#999;" mode="selector"
				:range="visitNames" :value="selectedVisitIndex" @change="handleVisitChange">
				<view style="display: flex;align-items: center;">{{visitList[selectedVisitIndex].text}}
					<u-icon style="margin-left: 15rpx;" name="arrow-down" size="18" color="#666"></u-icon>
				</view>
			</picker>
		</view>
		<view class="sellingGoods_bottom">
			<button style="background-color: #ff6600;color: white;" @click="addShop">+ 上架新商品</button>
			<button>+ 上架捆绑包</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value11: false,
				show:false,
				icon: 'arrow-down',
				selectedVisitIndex: 0,// 用于绑定选中的索引
				selectedIndex:0,
				options: [ // 下拉框选项数组
					{
						text: '不限',
						value: '1'
					},
					{
						text: '1',
						value: '2'
					},
					{
						text: '2',
						value: '3'
					},
					{
						text: '3',
						value: '4'
					},
					{
						text: '4',
						value: '5'
					}
				],
				visitList: [{
						text: '全部'
					},
					{
						text: '已上架'
					},
					{
						text: '已隐藏'
					}
				],
			}
		},
		computed: {
			// 计算属性用于获取visitList中的text数组
			visitNames() {
				return this.visitList.map(item => item.text);
			},
			visitName(){
				return this.options.map(item => item.text);
			}
		},
		methods: {
			addShop(){
				uni.navigateTo({
					url:'/pages/content/newShop/newShop'
				})
			},
			handleVisitChanges(event) {
				this.selectedIndex = event.target.value;
			},
			handleVisitChange(event) {
				this.selectedVisitIndex = event.target.value;
			},
			toggleAdvancedOptions() {
				// 切换show的值
				this.show = !this.show;
				// 根据show的值改变icon的名称
				this.icon = this.show ? 'arrow-up' : 'arrow-down';
			},
		}
	}
</script>

<style>
	.sellingGoods {
		width: 90%;
		margin: auto;
		letter-spacing: 1rpx;
	}
	.sellingGoods_bor {
		width: 93%;
		margin: 30rpx auto;
		padding: 25rpx;
		line-height: 76rpx;
	}
	.sellingGoods_bottom{
		width: 100%;
		display: flex;
		background-color: white;
		height: 120rpx;
		align-items: center;
		line-height: 80rpx;
		position: fixed; /* 使用固定定位 */
		bottom: 0rpx;
		left: 0;
		right: 0;
	}
	.sellingGoods_bottom button{
		background-color: #fffaf5;
		height: 80rpx;
		line-height: 80rpx;
		color: #ff6600;
		border: none;
	}
</style>
